<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>对话框 dialogs-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script src="../../style/lib/jquery-1.6.1.min.js" tppabs="http://www.jqmapi.com/style/lib/jquery-1.6.1.min.js"></script>
<script src="../../style/jqmapi.js" tppabs="http://www.jqmapi.com/style/jqmapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/page/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>对话框 dialogs</h1>
    <ul class="tab">
    	<a href="#" class="current">综述</a>
		<a href="#">选项</a>
    	<a href="#">方法</a>
    	<a href="#">事件</a>
    </ul>
              <br />  
                
	<div class="subtab">    
    				<div class="desc"><div>通过给指向页面的链接增加data-rel=&quot;dialog&quot;的属性，可以把任何指向的页面表现对对话框。当应用了对话框的属性之后，qjmobile框架会给新页面增加圆角，页面周围增加margin，以及深色的背景，使得对话框浮在页面之上</div></div>
				<p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot;&gt;Open dialog&lt;/a&gt; </div>
				<h1>对话框的转场 Transitions</h1>
<div class="desc">
  <div>因为Jquery Mobile里对话框也是一个标准的&quot;page&quot;,所以他会以默认的slide转场效果打开。而且像其他的页面一样，你也可以通过给链接添加data-transition的属性指定对话框的转场效果。为了让对话框看起来效果更好，我们推?quot;pop&quot;, &quot;slideup&quot;，&quot;flip&quot;三种转场效果。</div></div>
  <p class="indent"><strong>HTML 代码:</strong></p>
				<div class="code">&lt;a href=&quot;foo.html&quot; data-rel=&quot;dialog&quot; data-transition=&quot;pop&quot;&gt;Open dialog&lt;/a&gt; </div>
<hr />
				<h1>关闭对话框 Closing dialogs</h1>
<div class="desc">
  <div>对话框内的任何链接被点击时，Jquery Mobile会自动关闭对话框，用回退效果转场到指向该对话框的页面。要在对话框内创建一个取消"按钮，只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性。这样制作的后退链接在不支持js的设备上也同样管用。</div></div>
<div class="desc">
  <div>对于js生成的链接，可以把链接的herf设为"#",添加data-rel="back"属性。也可以手动地调用对话框的close()方法关闭对话框，比如?
$('.ui-dialog').dialog('close').
</div></div>
<hr>
				<h1>设置关闭按钮的文字 Setting the close button text</h1>
<div class="desc">
  <div>就像页面插件一样，你可以设置程序或属性两种方法设置对话框关闭按钮的文字。程序的设置可以通过更改mobileinit绑定的事件，然后? $.mobile.dialog.prototype.options.closeBtnText  设置一个字符串。或者给标记代码增加   data-close-btn-text  属性来设置文字</div></div>
  				<h1>历史和后退按钮的行为 History & Back button behavior</h1>
                <div class="desc">
  <div>因为对话框是典型地用来给页面起支持作用的，所以Jquery Mobile不会在历史记录的哈希值里包含对话框。这就意味着当点击对话框后退按钮时，他不会出现在你的浏览器历史记录里。比如说，如果你在一个页面上，点击了一个按钮打开了一个对话框，然后关闭了这个对话框，到了另一个页面。这时如果你点击浏览器的后退按钮，那你会回到第一个页面，而不是对话框</div></div>
  
  
  				<h1>串联对话框 Chaining Dialogs</h1>
<div class="desc">
  <div>请注意：如果一个对话框打开了另一个话框，那么点击最后被打开的对话框的<strong>data-rel="back" </strong>按钮，会返回之前一个被打开的对话框，直到返回到<strong>data-role="page"</strong>容器。这保证了对话框之间的导航关系。
  
  </div></div>
  				<h1>对话框的样式和主题 Styling & theming</h1>
<div class="desc">
  <div>通过给对话框添加data-theme 属性，可以给对话框定义不同的主题。对话框是浮在一个蒙版层上的。蒙版层的主题样式默认为a主题，但是通过给页面容器添加<strong> data-overlay-theme</strong>属性可以设置单独蒙版层的主题。</div></div>  
<div class="desc">
  				<h1>对话框的宽度和margin Dialog width and margins</h1>
  <div>为了增加可读性，对话框的宽度默认为设备宽度的<strong>92.5%</strong>,max-width为500像素。对话框的margin的默认margin也为10%,这样在越大的设备上，上方的空隙也就越大。对话框默认内部的容器向上有15PX的偏移。通过设置以下的css代码可以覆盖。</div></div>
    <p class="indent"><strong>CSS 代码:</strong></p>
				<div class="code">.ui-dialog-contain {<br>
                  <strong>width: 92.5%;</strong><br>
                  <strong>max-width: 500px;</strong><br>
                  <strong>margin: 10% auto 15px auto;</strong><br>
padding: 0;<br>
position: relative;<br>
<strong>top: -15px;</strong><br>
}</div>
    </div>  
                
    <div class="subtab">
<div class="desc">
<h2>下面的选项适用于<strong>所有的对话框</strong></h2>
</div>
	<h1 class="method"><div class="wg">closeBtnText</div>
  		<div class="info">字符串</div></h1>
	<p class="indent"><strong>默认："Close"</strong></p>
    
<div class="code"> 
    <p>自定义关闭按钮的文字。默认情况下这个文字是不显示的，只会显示一个ICON，但是平度阅读器会将它读出，所以非常重要。</p>
    <p>通过data-close-btn-text属性可以将它修改.</p>
    <p><strong>$( ".selector" ).dialog({ closeBtnText: "Fermer" });</strong></p>
  </div>

	<h1 class="method"><div class="wg">initSelector</div>
  		<div class="info">css选择符</div></h1>
	<p class="indent"><strong>默认：":jqmData(role='dialog')"</strong></p> 
<div class="code"> 
    <p>此选项用来定义被被初始化为表单按钮的选择符（通过元素类型，数据规则等）</p>
    <p>要改变被初始化的元素，需要给mobileinit event事件绑定这个选项</p> 
    <p>$( document ).bind( "mobileinit", function(){</p>
    <p>&nbsp;&nbsp;&nbsp;<strong>$.mobile.dialog.prototype.options.initSelector = ".mydialog";</strong></p>
    <p>});</p>
  </div> 
	<h1 class="method"><div class="wg">overlayTheme</div>
  		<div class="info">字符串</div></h1>
	<p class="indent"><strong>默认："a"</strong></p>
<div class="code"> 
    <p>对话框是浮在一个蒙版层上的。蒙版层的主题样式默认为a主题，但是通过给页面容器添加 data-overlay-theme属性可以设置单独蒙版层的主题</p>
    <p>$( ".selector" ).dialog(<strong>{ overlayTheme: "e" }</strong>);</p>
    
    
    
  </div> 
  </div> 
                
    <div class="subtab">
<div class="desc">
<h2>对话框有如下的方法。</h2>
</div>
	<h1 class="method">
	  <div class="wg">close</div>
  		<div class="info">关闭一个对话框</div></h1>
<div class="code"> 
    <p>$( ".selector" ).dialog( "close" );</p>
  </div> 
    </div>         
                
                
    <div class="subtab">
<div class="desc">
<h2>对话框有如下的事件。</h2>
</div>
	<h1 class="method">
	  <div class="wg">create</div>
  		<div class="info">对话框创建时触发</div></h1>
<div class="code"> 
    <p>$( &quot;.selector&quot; ).bind({<br>
      <strong>create: function(event, ui) { ... }</strong><br>
});</p>
</div>
  </div> 
    </div>               
                
              
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



